@charset "utf-8";

/* Reset */
html {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a {
	color: #555555;
	text-decoration: none;
}
*{
    -webkit-user-select:none;
    -moz-user-select: none; 
    -ms-user-select: none;     
    user-select:none;/*禁用页面内容选中和复制操作*/        
    -webkit-touch-callout:none;/*禁用长按页面时的弹出菜单(iOS下有效)*/
    -webkit-tap-highlight-color:rgba(0,0,0,0);/*去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android)*/         
}
*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
input,
select,
textarea,
button {
	font-size: inherit;
}

input,
select,
textarea,
button {
	font-family: inherit;
	vertical-align: middle;
}

img,
form,
iframe,
fieldset,
table,
table th,
table td {
	border: 0 none;
}

a,
input,
select,
textarea,
button {
	outline: none;
}

img {
	max-width: 100%;
	vertical-align: middle;
	-ms-interpolation-mode: bicubic;
}

ul,
ol {
	list-style: none;
}

i,
em,
address {
	font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6,
th,
strong,
b {
	font-weight: 700;
}

iframe {
	display: block;
}

sub,
sup {
	position: relative;
	vertical-align: baseline;
	font-size: 75%;
	line-height: 0;
}

sub {
	bottom: -5px;
}

sup {
	top: -5px;
}

/*table{ table-layout:fixed; width:100%; border-collapse:collapse; border-spacing:0;}*/
legend,
hr,
[hidden],
template,
caption {
	display: none;
}

textarea {
	resize: none;
}

label,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="image"] {
	cursor: pointer;
}

button[disabled],
html input[disabled] {
	cursor: default;
}

button,
select,
textarea,
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"],
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
}
// header
.header{
	position: relative;
	height: 44px;
	line-height: 44px;
	text-align: center;
	font-size: 18px;
	color: #333333;
	.back{
		display: block;
		position: absolute;
		left: 10px;
		width: 44px;
		height: 44px;
		background: url("../img/ic_linear_back.png") no-repeat;
		background-size: 44px;
	}
}
/* button */
button {
	border: none;
	background: none;
}
body {
	margin: 0 auto;
	width: 100%;
	max-width: 750px;
	height: 100%;
}

.tabber {
	.tabber-item {
		flex: 1;
		text-align: center;
		line-height: 14px;
		font-size: 12px;
		color: #333333;
	
		&.active {
			color: #AAAAAA;
		}
	
		img {
			margin-bottom: 2px;
			width: 26px;
		}
	}
	display: -webkit-flex;
	display: flex;
	position: fixed;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 100%;
	max-width: 750px;
	background: #ffffff;
	box-shadow: 0 0 4px 0 #EEEEEE;
	padding-top: 6px;
	padding-bottom: calc(6px + constant(safe-area-inset-bottom));
	padding-bottom: calc(6px + env(safe-area-inset-bottom)) 
}
.date-tab{
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 0 12px;
	height: 48px;
	.date-item{
		width: 60px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		font-size: 16px;
		font-weight: 500;
		border-radius: 15px;
		color: #777777;
		&.active{
			color: #FFFFFF;
			background: #4B4B4B;
		}
	}
}

.myPicker{
	.picker{
		.picker-items{
			.picker-item{
				font-size: 16px;
				color: #AAAAAA;
				&.picker-selected{
					font-size: 24px;
					font-weight: 500;
					color: #333333;
				}
			}
			.rate{
				.picker-item{
					padding-left: 45px;
				}
				.picker-selected{
					position: relative;
					&::before{
						content: '';
						position: absolute;
						top: 50%;
						left: 16px;
						margin-top: -6px;
						width: 12px;
						height: 12px;
						background: url("../img/ic_list_enter.png") no-repeat;
						background-size: cover;
					}
				}
			}
		}
		.picker-center-highlight{
			display: none;
		}
	}
	.mint-popup{
		bottom: 34px;
		width: calc(100% - 24px);
		border-radius: 16px;
		.title{
			height: 48px;
			line-height: 48px;
			text-align: center;
			font-size: 18px;
			color: #333333;
		}
		.picker-btn{
			display: flex;
			justify-content: space-around;
			padding-bottom: 36px;
			font-size: 18px;
			font-weight: 500;
			text-align: center;
			.cancel,.confirm{
				box-sizing: border-box;
				width: 140px;
				height: 48px;
				line-height: 48px;
				border-radius: 24px;
				&:active{
					opacity: 0.8;
				}
			}
			.cancel{
				color: #777777;
				border: 1px solid #777777;
			}
			.confirm{
				color: #FFFFFF;
				background: #00CEB8;
			}
		}
	}
	.mint-datetime{
		padding-bottom: 40px;
		.picker{
			position: relative;
			padding-bottom: 74px;
			.picker-toolbar{
				display: flex;
				justify-content: space-around;
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 48px;
				border-bottom: 0;
				.mint-datetime-action{
					float: none;
					box-sizing: border-box;
					display: block;
					width: 140px;
					height: 48px;
					line-height: 48px;
					text-align: center;
					font-size: 18px;
					font-weight: 500;
					color: #777777;
					border-radius: 24px;
					border: 1px solid #777777;
					&.mint-datetime-confirm{
						color: #fff;
						background-color: #00CEB8;
						border-color: #00CEB8;
					}
				}
			}
		}
	}
	.mint-cell-wrapper,.mint-cell:last-child{
		background: none;
	}
	.mint-checklist{
		max-height: 318px;
		overflow-y: auto;
		.mint-cell{
			.mint-cell-wrapper{
				height: 60px;
				.mint-cell-title{
					.mint-checklist-label{
						line-height: 24px;
					}
				}
			}
		}
		.mint-checkbox-input{
			&:checked+.mint-checkbox-core{
				background-image: url("../img/setting/ic_color_choose_p@2x.png");
				&::after{
					content: none;
				}
			}
		}
		.mint-checkbox-core{
			width: 24px;
			height: 24px;
			border: 0;
			background-image: url("../img/setting/ic_color_choose_d@2x.png");
			background-repeat: no-repeat;
			background-size: 24px 24px;
		}
	}
}

#dateMask{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.4);
	&.show{
		display: block;
		animation: fadeIn 0.3s;
		animation-fill-mode: forwards;
	}
	&.hide{
		animation: fadeout 0.3s;
		animation-fill-mode: forwards;
	}
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeout {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}